<template>
    <div class="page-bloglist">
        <template v-if="this.bloglist.length != 0"> </template>
        <Blog :loading="loading">
            <template slot="body">
                <!-- 长列表渲染 -->
                <div class="list-wrap" ref="listWrap">
                    <div class="scroll-bar" ref="scrollBar"></div>
                    <!-- <div
                        class="art-card"
                        v-for="item in bloglist"
                        :key="item.id"
                    >
                        <span class="top-warp" v-if="item.weight != 0"
                            >置顶</span
                        >

                        <h2 class="title">
                            <span
                                class="top-warp-mobile iconfont"
                                v-if="item.weight != 0"
                                >&#xeba2;</span
                            >
                            <router-link
                                class="title-item"
                                :to="{
                                    name: 'blog',
                                    params: { id: item.id },
                                }"
                            >
                                {{ item.title }}
                            </router-link>
                        </h2>
                        <p class="content" @click="toBlog(item.id)">
                            {{ item.summary }}
                        </p>
                        <div class="time-arch">
                            <div class="time">
                                <span class="time-icon">
                                    <i class="iconfont icon-folder"></i>
                                </span>
                                <span
                                    class="time-desc"
                                    style="vertical-align: middle"
                                    >发表于
                                </span>
                                <span class="time-content">{{
                                    item.createDate
                                }}</span>
                            </div>
                            <div class="arch">
                                <span class="arch-icon">
                                    <i class="iconfont icon-folder"></i>
                                </span>
                                <span
                                    class="arch-desc"
                                    style="vertical-align: middle"
                                    @click="goChoice"
                                    >分类于
                                </span>
                                <span class="arch-content">
                                    {{ item.category.categoryName }}
                                </span>
                            </div>
                        </div>
                        <div
                            class="tags-warp multiport-hide"
                            v-show="item.tags.length !== 0"
                        >
                            <div class="tags">
                                <span
                                    class="iconfont icon-tag"
                                    style="color: #5d5a5a"
                                ></span>
                                <div class="tags-list">
                                    <span
                                        class="tag"
                                        v-for="tag in item.tags"
                                        :key="tag.id"
                                        >{{ tag.tagName }}</span
                                    >
                                </div>
                                <span
                                    class="where iconfont icon-diannao_o"
                                ></span>
                            </div>
                        </div>
                    </div> -->

                    <blog-card
                        v-for="item in bloglist"
                        :key="item.id"
                        :item="item"
                    />
                    <!-- blank -->
                    <div ref="blank"></div>
                    <div
                        class="loading-container"
                        v-show="loadMore"
                        style="
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        "
                    >
                        <i
                            class="iconfont icon-loading-before loading-icon"
                            style="animation: rotate 1s infinite linear"
                        >
                        </i>
                    </div>
                    <div
                        class="multiport-hide"
                        v-show="noDataFlag"
                        style="text-align: center; color: var(--text-color)"
                    >
                        这次真的没有啦~
                    </div>
                </div>
            </template>
        </Blog>
    </div>
</template>

<script>
import Blog from '@/skeleton/blog.vue'
import blogCard from '@/components/blogCard'
import { throttle } from '@/utils/common'
const PAGE_SIZE = 5
export default {
    components: { Blog, blogCard },
    computed: {
        bloglist() {
            return this.$store.getters.articleList
        },
        clientHeight() {
            return this.$store.getters.clientHeight
        },
        maxPage() {
            return Math.ceil(this.$store.getters.articleNum / PAGE_SIZE)
        },
    },
    data() {
        return {
            loading: true,
            loadMore: true,
            noDataFlag: false,
            page: 2,
            callback: this.handleScroll(),
        }
    },

    methods: {
        toBlog(id) {
            this.$router.push(`/archive/${id}`)
        },
        goChoice() {
            this.$router.push(`/choice`)
        },
        handleScroll() {
            const fn = async () => {
                const height = this.$refs.blank.getBoundingClientRect().top
                console.log(this.page, this.maxPage)
                if (this.page > this.maxPage) {
                    this.loadMore = false
                    this.noDataFlag = true
                    this.$message.info({
                        message: '数据全部加载完毕',
                        duration: 1000,
                    })
                    window.removeEventListener('scroll', this.callback)
                    return
                }
                if (this.clientHeight >= height) {
                    const page = this.page++
                    await this.$store.dispatch('article/getArticle', {
                        page,
                        pageSize: PAGE_SIZE,
                    })
                }
            }

            return throttle(fn, 800)
        },
    },
    async mounted() {
        const articleList = this.$store.getters.articleList
        const currentPage = Math.ceil(articleList.length / PAGE_SIZE)

        if (articleList.length == 0) {
            console.log('本地无缓存')
            await this.$store.dispatch('article/getArticle', {
                page: 1,
                pageSize: PAGE_SIZE,
            })
            this.loading = false
            window.addEventListener('scroll', this.callback)
        } else if (currentPage == this.maxPage) {
            console.log('有全部缓存')
            this.loadMore = false
            this.loading = false
            this.noDataFlag = true
            this.$message.info({
                message: '数据全部加载完毕',
                duration: 1000,
            })
            setTimeout(() => {
                this.$emit('updateHandle')
            }, 200)
        } else if (currentPage < this.maxPage) {
            console.log('有部分缓存', currentPage)
            this.page = currentPage + 1
            this.loading = false
            window.addEventListener('scroll', this.callback)
        }
    },
}
</script>
<style lang="less" scoped>
.page-bloglist {
    position: relative;
}

.date {
    border: 0;
}

.articles :nth-child(1) {
    border: none;
}

.bloglist :nth-child(1) {
    border: none;
}
@keyframes blog-title-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes blog-tag-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.art {
    position: relative;
    margin-bottom: 10px;
    padding: 20px;
    overflow: hidden;
    .top-warp {
        position: absolute;
        right: -27px;
        top: 10px;
        transform: rotate(45deg);
    }
}
.art:not(:first-child) {
    border-top: 1px solid #f0f2f7;
}

.title-item {
    vertical-align: top;
}

.art-card {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #ebebeb;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
    .top-warp {
        letter-spacing: 1px;
        position: absolute;
        top: 10%;
        right: -6px;
        padding: 5px 10px;
        background-color: #f8f5f2;
        color: var(--default);
        font-size: 12px;
        border-radius: 5px 0 0 5px;
    }

    .title {
        cursor: pointer;
        height: 22px;
        padding-left: 10px;
        margin-bottom: 20px;
        line-height: 24px;
        font-size: 20px;
        border-left: 4px solid var(--default);
        animation: blog-title-fade 0.6s ease-out 1;
        font-family: 'Prompt', sans-serif;
        &:hover {
            color: #175199;
        }
        .top-warp-mobile {
            display: none;
            vertical-align: top;
            font-size: 20px;
        }
    }
    .content {
        font-size: 15px;
        font-weight: 400;
        color: rgb(102, 97, 97);
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        line-height: 2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        cursor: pointer;
        opacity: 0;
        animation: blog-title-fade 0.6s ease-out 0.4s 1 forwards;
        font-family: 'Average Sans', sans-serif;
    }
    .content:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .time-arch {
        display: flex;
        opacity: 0;
        width: 100%;
        height: 20px;
        margin-top: 8px;
        padding: 20px 2px;
        align-items: center;
        animation: blog-title-fade 0.6s ease-out 0.6s 1 forwards;

        .time {
            margin-right: 10px;
            font-size: 10px;
            color: #aaa;
            .time-icon {
                margin-right: 3px;
                vertical-align: bottom;
            }
            .time-content {
                vertical-align: middle;
                border-bottom: 1px dashed #999;
            }
        }
        .arch {
            color: #aaa;
            margin-left: 10px;
            font-size: 10px;
            .arch-icon {
                margin-right: 3px;
                vertical-align: bottom;
            }
            .arch-content {
                vertical-align: middle;
                border-bottom: 1px solid #999;
            }
        }
    }
    .tags-warp {
        margin-top: 10px;

        .tags {
            opacity: 0;
            animation: blog-tag-fade 0.6s ease-out 0.8s 1 forwards;
            display: flex;
            position: relative;
            align-items: center;
            .where {
                position: absolute;
                right: 0px;
                top: 50%;
                transform: translateY(-50%);
            }
            .icon-tag {
                background-color: #f9f9ff;
                border-radius: 10px;
                font-size: 20px;
                margin-right: 20px;
                padding: 4px;
            }
            .tags-list {
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                overflow: hidden;
                color: rgb(93, 90, 90);
                .tag {
                    background-color: #f9f9ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 2px 6px;
                    margin-right: 10px;
                    font-size: 10px;
                    padding: 8px;
                    border-radius: 10px;
                }
            }
        }
    }
}
</style>
